import React from "react";
import { NavBar, Button } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import styles from "../style/Pointsdetails.module.css";

interface OrderDetails {
  orderID: number;
  orderNumber: string;
  productName: string;
  points: string;
  orderTime: string;
  specification: string;
  status: string;
  productImage: string;
  orderNum: number;
}

const OrderdetailsPage: React.FC = () => {
  const navigate = useNavigate();

  // 从localStorage获取订单详情
  const orderDetails = JSON.parse(
    localStorage.getItem("currentOrder") || "{}"
  ) as OrderDetails;

  return (
    <div className={styles.container}>
      <NavBar onBack={() => navigate("/scoreDetails")}>订单详情</NavBar>

      {/* 商品核心信息区 */}
      <div className={styles.productHeader}>
        <div className={styles.productImages}>
          <img
            src={orderDetails.productImage}
            alt={orderDetails.productName}
            className={styles.productImage}
          />
        </div>
        <div className={styles.productInfo}>
          <div className={styles.productTags}>
            <span className={styles.greenTag}>{orderDetails.productName}</span>
          </div>
          <p className={styles.productSpec}>{orderDetails.specification}</p>
          <div className={styles.justify}>
            <p className={styles.productQuantity}>
              数量: {orderDetails.orderNum}
            </p>
            <p className={styles.productPrice}>积分: {orderDetails.points}</p>
          </div>
        </div>
      </div>

      {/* 操作按钮区 */}
      <div className={styles.actionButtons}>
        <Button
          className={styles.button}
          onClick={() => navigate("/customer-service")}
        >
          <span className={styles.buttonIcon}>📞</span>
          联系客服
        </Button>
        <Button className={styles.button} onClick={() => navigate("/feedback")}>
          <span className={styles.buttonIcon}>✉️</span>
          投诉&建议
        </Button>
      </div>

      {/* 订单详细信息 */}
      <div className={styles.orderInfo}>
        <div className={styles.infoItem}>
          <span className={styles.infoLabel}>订单编号：</span>
          <span>{orderDetails.orderNumber}</span>
        </div>
        <div className={styles.infoItem}>
          <span className={styles.infoLabel}>下单时间：</span>
          <span>{orderDetails.orderTime}</span>
        </div>
        <div className={styles.infoItem}>
          <span className={styles.infoLabel}>收货地址：</span>
          <span>北京</span>
        </div>
      </div>
    </div>
  );
};

export default OrderdetailsPage;
